<script setup lang="ts">
import SellRecordUpdateModal from './SellRecordUpdateModal.vue'
import type { TableInstanceColumns } from '@/components/ProTable/type'
import { useUserStore } from '@/stores'
import CellStatus from '@/components/ProCell/CellStatus.vue'

const props = defineProps({
  records: {
    type: Array,
    required: true,
    default: () => [],
  },
  loading: {
    type: Boolean,
    default: false,
  },
  pagination: {
    // type: Object,
    required: true,
  },
  editable: {
    type: Boolean,
    default: true,
  },
})

const userStore = useUserStore()

const columns: TableInstanceColumns[] = [
  { title: '业务类型', dataIndex: 'businessType', slotName: 'businessType', width: 100 },
  { title: '销售顾问', dataIndex: 'sellerName', slotName: 'sellerName', width: 100 },
  { title: '报名id', dataIndex: 'enrollmentId', slotName: 'enrollmentId', width: 200 },
  { title: '订单/退款单id', dataIndex: 'orderId', slotName: 'orderId', width: 240 },
  { title: '学生', dataIndex: 'studentName', slotName: 'studentName', width: 120 },
  { title: '班级', dataIndex: 'className', slotName: 'className', tooltip: true, ellipsis: true, width: 360 },
  { title: '校区', dataIndex: 'campusName', slotName: 'campusName', width: 120 },
  { title: '销售业绩', dataIndex: 'performance', slotName: 'performance', width: 100 },
  { title: '是否有效', dataIndex: 'valid', slotName: 'valid', width: 150 },
  {
    title: '操作',
    slotName: 'action',
    width: 120,
    align: 'center',
    fixed: 'right',
    show: userStore.hasPermission(['education:student:write']),
  },
]

const router = useRouter()

// 详情
const onEnrollmentDetail = (row) => {
  console.log(row)
  router.push({
    path: '/education/class/enroll/detail',
    query: {
      studentId: row.studentId,
      classId: row.classId,
      enrollmentId: row.enrollmentId,
      // renewalClassList: (row.renewalClassIds || []).join(','),
    },
  })
}

// 详情
const onStudentDetail = (row) => {
  router.push({ path: '/shop/enrollment/student/detail', query: { id: row.studentId } })
}

const sellUpdateRef = ref<InstanceType<typeof SellRecordUpdateModal>>()
const onUpdate = (row) => {
  sellUpdateRef.value?.open(row.id, row)
}
</script>

<template>
  <ProTable
    :show-index="true"
    :data="records"
    :columns="columns"
    :loading="loading"
    :pagination="pagination"
    :disabled-tools="['refresh']"
  >
    <template #enrollmentId="{ record }">
      <a-link @click="onEnrollmentDetail(record)">
        {{ record.enrollmentId }}
      </a-link>
    </template>
    <template #orderId="{ record }">
      <a-link v-if="record.valid">
        {{ record.businessId }}
      </a-link>
      <a-link v-else>
        {{ record.businessId }}
      </a-link>
    </template>
    <!-- <template #className="{ record }">
      <div>{{ record.className || '-' }}</div>
    </template> -->
    <template #businessType="{ record }">
      <CellDict :value="record.businessType" code="ChangeTypeEnum" />
    </template>
    <template #valid="{ record }">
      <CellStatus :status="record.valid" on-text="有效" off-text="无效" />
    </template>
    <template #action="{ record }">
      <a-space v-if="editable">
        <a-link v-permission="['shop:order:manage']" @click="onUpdate(record)">
          修改
        </a-link>
      </a-space>
    </template>
  </ProTable>
  <SellRecordUpdateModal ref="sellUpdateRef" @ok="() => {}" />
</template>

<style lang="less" scoped>
.label {
  display: inline-block;
  width: 60px;
  text-align: right;
  flex-shrink: 0;
  margin-right: 10px;
  color: var(--color-text-1);
}
</style>
